Day 30：Google Map 結合口罩資料＆鐵人賽最後一天

13th鐵人賽

HKT 線上教室

2021-09-30 08:05:14

1567 瀏覽

分享至

本篇文章同步發表在 HKT 線上教室部落格，線上影音教學課程已上架至 Udemy 和 Youtube 頻道。另外，想追蹤更多相關技術資訊，歡迎到臉書粉絲專頁按讚追蹤喔～

程式碼範例

範例名稱：Google Map 結合口罩資料
開發人員：HKT (侯光燦)
程式語言：Kotlin
開發環境：Android Studio 4.1.2 & Android 11 & Kotlin 1.4.30
授權範圍：使用時必須註明出處且不得為商業目的之使用
範例下載點：點我下載

今天是鐵人賽的最後一天，我們將會把之前所學習的內容做一個整合，實作出 Google Map 結合口罩資料的應用。在地圖上透過圖釘標示的方式，顯示每間藥局所在的位置，然後如果我們點擊圖釘標示，將會以小張卡片的方式，顯示該間藥局名稱與當下成人、小孩口罩數量。若繼續點擊卡片，則會跳到藥局詳細頁。

口罩地圖 Wireframe

下載口罩資料

在 MapActivity 加入之前下載口罩資料的方法 getPharmacyData。

private fun getPharmacyData() {
    //顯示忙碌圈圈
    progressBar.visibility = View.VISIBLE

    OkHttpUtil.mOkHttpUtil.getAsync(PHARMACIES_DATA_URL, object : OkHttpUtil.ICallback {
        override fun onResponse(response: Response) {
            val pharmaciesData = response.body?.string()

            Log.d("QQQ", "pharmaciesData:$pharmaciesData")

            pharmacyInfo = Gson().fromJson(pharmaciesData, PharmacyInfo::class.java)

            runOnUiThread {
                //關閉忙碌圈圈
                progressBar.visibility = View.GONE
                addAllMaker()
            }

        }

        override fun onFailure(e: okio.IOException) {
            Log.d("HKT", "onFailure: $e")

            //關閉忙碌圈圈
            progressBar.visibility = View.GONE
        }
    })
}

加入所有口罩資料標記

private fun addAllMaker() {
    pharmacyInfo?.features?.forEach { feature ->
        val pinMarker = googleMap?.addMarker(
            MarkerOptions()
                .position(
                    LatLng(
                        feature.geometry.coordinates[1],
                        feature.geometry.coordinates[0],
                    )
                )
                .title(feature.property.name)
                .snippet(
                    "${feature.property.mask_adult}," +
                            "${feature.property.mask_child}"
                )
        )
    }

}

將所有口罩資料，加入地圖標記，移動畫面過程中，會有很明顯會出現效能使用上的問題，實際上只要載入螢幕畫面範圍的口罩資料即可，螢幕畫面外的口罩資料可以清除。

實作 OnInfoWindowClickListener

宣告將實作 OnInfoWindowClickListener，自定義當我們點擊資訊視窗，要處理的相關邏輯。

class MapActivity : AppCompatActivity(), OnMapReadyCallback, GoogleMap.OnInfoWindowClickListener {

}

設定資訊視窗、資訊視窗點擊監聽

加入 setOnInfoWindowClickListener。

override fun onMapReady(googleMap: GoogleMap) {
    this.googleMap = googleMap
    googleMap.moveCamera(
        CameraUpdateFactory.newLatLngZoom(
            defaultLocation, 15f
        )
    )
googleMap?.setInfoWindowAdapter(MyInfoWindowAdapter(mContext))
googleMap?.setOnInfoWindowClickListener(this)

//        getLocationPermission()
}

資訊視窗點擊事件

點擊「自定義資訊視窗」後，將點擊當下項目的藥局資料，傳遞並打包跳轉到詳細資訊頁。

override fun onInfoWindowClick(marker: Marker?) {
    marker?.title?.let { title ->
//            Log.d("HKT", title)

        val filterData =
            pharmacyInfo?.features?.filter {
                it.property.name == (title)
            }

        if (filterData?.size!! > 0) {
            val intent = Intent(this, PharmacyDetailActivity::class.java)
            intent.putExtra("data", filterData.first())
            startActivity(intent)
        } else {
            Log.d("HKT", "查無資料")
        }
    }
}